<template>
	<joy-page class="joyPage" :fixed="true" :needLogin="false">
		<scroll-view scroll-x class="nav topnav bg-white"  id="tab-bar">
			<view class="flex text-center">
				<view class="cu-item flex-sub" v-for="(item,index) in items" :key="index" @tap="tabSelect" :data-id="item.name">
					<span :class="item.name==TabCur?'text-black cur':''">{{item.label}}</span>
				</view>
			</view>
			<view class='block'></view>
		</scroll-view>
		<scroll-view style="width:100%;position: absolute;top: 90rpx;bottom: 98rpx;" scroll-y :scroll-top="scrollTop" @scroll="scrollTopFun"
		 :lower-threshold="50">
			<view class="padding-left padding-right" style="border-radius: 10rpx; overflow: hidden;">
				<m-swiper :list="info.thumb" :type="2"></m-swiper>
			</view>
			<view class="content shadow">
				<h1>{{info.project_name}}</h1>
				<view>
					<span class="tag" v-for="(item, index) in info.tags" :key="index">{{
               item
              }}</span>
				</view>
				<view class="cu-progress round sm striped active">
					<view :class="info.percent==='100%'?'bg-green': 'bg-red'" :style="[{ width:loading ? info.percent:''}]">{{info.percent}}</view>
				</view>
				<view class="flex money-info">
					<view class=flex-sub>
						<view class="common">
							<span class="label">已筹金额:</span>
							<span class="imp">{{toMoney(info.has_order_money)}}</span>
						</view>
						<view>
							<span class="label">剩余天数:</span>
							<span>{{info.status > 2 ? "0天" : info.remaining_time
                  }}</span>
						</view>
					</view>
					<view class=flex-sub>
						<view class="common">
							<span class="label">目标金额:</span>
							<span>{{toMoney(info.target_code)}}</span>
						</view>
						<view>
							<span class="label">我已支持:</span>
							<span>{{toMoney(info.my_order_money)}}</span>
						</view>
					</view>
				</view>
			</view>
			<view id="list">
				<view class="margin" v-if="TabCur == '0'">
					<rich-text :nodes="info.des"></rich-text>
				</view>
				<view v-if="TabCur == '1'" class="cu-card article bg-white">
					<view class="cu-item" v-for="(item, index) in info.new_list" :key='index' @tap="goPage(item.id)">
						<view class="title">{{htmlEncode(item.title)}}</view>
						<view class="cu-content bg-white">
							<view class="desc bg-white">
								<p class="text-content">{{htmlEncode(item.description)}}</p>
								<!-- <view class="tag">【{{item.typeid === 2? '平台公告':item.typeid === 1? "项目动态" : "娱乐资讯" }}】</view> -->
								<view class="time"><span>好融艺</span>{{item.create_time}}</view>
							</view>
							<image :src="imgUrl + item.litpic" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="margin" v-if="TabCur == '2'">
					<rich-text :nodes="info.detail"></rich-text>
				</view>
				<view class="tip-box">
					<view class="text-nor">项目发起方</view>
					<image :src="imgUrl+ '/uploads/projectuser/logo/'+ info.logo" mode="widthFix"></image>
					<text class="text-sm">{{info.company_intro}}</text>
				</view>
				<view class="tip-box">
					<view class="text-nor text-orange">风险说明</view>
					<text class="text-sm"> 1、众筹不是商品交易，您根据自己的判断选择是否支持众筹项目，与发起人共同实现梦想并获得收益，众筹存在一定的风险；</text><br>
					<text class="text-sm">2、本平台作为您与项目方之间的桥梁，仅提供网络空间、技术服务和支持等中介服务，作为平台方筛选优质项目，合法合规展示项目信息，披露项目进展，对项目盈利及亏损不承担法律责任；</text><br>
					<text class="text-sm">3、众筹项目收益分配后续服务事项均由项目方负责，如遇项目方无故拖延收益分配等情形的，平台可对此进行协调沟通，帮助您实时了解相关情况，但不对此承担法律责任。</text><br>
					<text class="text-sm">4、由于市场风险，法律风险等各种因素，众筹可能失败，众筹期限内未达到目标筹资额失败的项目，您支持的款项会全部原路退还给您。</text>
				</view>
			</view>
		</scroll-view>
		<button class="cu-btn bg-orange lg" v-if="info.status === 2" @click="goOrderPage()">立即支持</button>
		<button class="cu-btn bg-grey lg" v-else-if="info.status >= 3">项目完成</button>
		<button class="cu-btn bg-orange lg" v-else-if="info.status === 1">预热中</button>
	</joy-page>
</template>

<script>
	import mSwiper from "@/components/m-swiper/m-swiper.vue"
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		name: "index",
		components: {
			mSwiper
		},
		computed: {
			...mapState(['forcedLogin', 'userInfo']),
			...mapGetters(['hasLogin'])
		},
		data() {
			let that = this;
			return {
				scrollComponents: '#tab-bar', // tab 容器 计算距离顶部距离使用
				scrollViewomponents: '#list', // 内容 容器 计算距离顶部距离使用
				scrollTop: 0, // scroll-view组件 距离顶部距离，点击tab时间置顶使用
				imgUrl: that.$mConfig.assetsPath,
				info: {},
				id: '54',
				loading: false,
				items: [{
						name: "0",
						label: "项目详情"
					},
					{
						name: "1",
						label: "项目动态"
					},
					{
						name: "2",
						label: "合作详情"
					},
				],
				TabCur: "0",
				scrollLeft: 0,
				showComponent: false, // 是否显示
				top: 0, // 顶部监听事件使用
			}
		},
		methods: {
			goOrderPage() {
				let that = this;
				if (this.userInfo.member_type !== '进取型') {
					uni.showModal({
						title: "尊敬的用户：",
						content: "您的投资类型评估不符合条件，请前往个人中心重新评估！",
						confirmText: "前往评估",
						cancelText: "取消",
						success(res) {
							if (res.confirm) {
								that.$mRouter.push({
									route: that.$mRoutesConfig.questionnaire,
								})
							}
						}
					});
					return false
				}
				this.$mRouter.push({
					route: this.$mRoutesConfig.order,
					query: {
						id: this.id
					}
				})
			},
			scrollTopFun(e) {
				this.top = e.detail.scrollTop;
				console.log('hi')
				this.getScrollTop();
			},
			// 计算距离
			getScrollTop() {
				let view = uni.createSelectorQuery().select(this.scrollComponents);
				console.log(view)
				let scrollView = uni.createSelectorQuery().select(this.scrollViewomponents);
				view.boundingClientRect(data => {
					// data.top  tab节点离页面顶部的距离为;
					console.log(data.top)
					if (data.top <= 0) {
						scrollView.boundingClientRect(scrollData => {
							// data.top  内容节点离页面顶部的距离为;
							if (scrollData.top > 0) {
								this.showComponent = false;
							} else {
								this.showComponent = true;
							}
						}).exec();
					} else {
						this.showComponent = false;
					}
				}).exec();
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			toMoney(num) {
				if (num || num === 0) {
					if (isNaN(num)) {
						alert("金额中含有不能识别的字符");
						return;
					}
					num = typeof num == "string" ? parseFloat(num) : num; //判断是否是字符串如果是字符串转成数字
					num = num.toFixed(2); //保留两位
					num = parseFloat(num); //转成数字
					num = num.toLocaleString(); //转成金额显示模式
					//判断是否有小数
					if (num.indexOf(".") === -1) {
						num = "￥" + num + ".00";
					} else {
						num = num.split(".")[1].length < 2 ? "￥" + num + "0" : "￥" + num;
					}
					return num; //返回的是字符串23,245.12保留2位小数
				} else {
					return "￥0.00";
				}
			},
			htmlEncode(text) {
				if (text) {
					var arrEntities = {
						lt: "<",
						gt: ">",
						nbsp: " ",
						amp: "&",
						quot: '"'
					};
					return text.replace(/&(lt|gt|nbsp|amp|quot);/gi, function(all, t) {
						return arrEntities[t];
					});
				} else {
					return "";
				}
			},
			formatImg(thumb) {
				if (thumb.indexOf("http") !== -1) {
					return thumb;
				} else {
					return this.imgUrl + thumb;
				}
			},
			async getInfo() {
				this.info = await this.$apis.detailProject({
					project_id: this.id
				});
				this.info.des = this.htmlEncode(this.info.des)
				this.info.des = this.info.des.replace(/\<img src="/gi, '<img style="width:100%;height:auto;display:block" src="' +
					this.imgUrl)
				this.info.detail = this.htmlEncode(this.info.detail)
				this.info.detail = this.info.detail.replace(/\<img src="/gi,
					'<img style="width:100%;height:auto;display:block" src="' + this.imgUrl)
				console.log(this.info.detail)
				this.loading = true
			},
		},
		onShareAppMessage(res) {
			this.$common.share()
		},
		onShow() {
			this.id = this.$store.state.projectId
			this.getInfo()
		},
		onLoad(res) {
			uni.showShareMenu({
				withShareTicket: true
			})
		}
	}
</script>

<style scoped lang="scss">
	.joyPage {
		background-color: #FFFEFF;
		position: fixed;
		width: 100%;
		height: 100%;
	}
    .block{
		width: 100%;
		height: 24rpx;
		background: #f6f6f6;

	}
	.content {
		width: 690rpx;
		padding: 38rpx 28rpx;
		margin: 36rpx auto 0;
		z-index: 10;
		position: relative;
		background: rgba(255, 255, 255, 0.84);
		box-shadow: 0px 1px 31px 0px rgba(0, 0, 0, 0.1);
		border-radius: 9px 9px 9px 9px;

		h1 {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: rgba(50, 50, 50, 1);
			text-align: center;
		}

		.tag {
			font-size: 24rpx;
			font-family: PingFang SC;
			color: rgba(40, 56, 71, 1);
			line-height: 88rpx;
			margin-right: 24rpx;
		}

		.money-info {
			font-size: 26rpx;
			font-family: PingFang SC;
			color: rgba(98, 98, 98, 1);
			margin-top: 42rpx;

			.imp {
				color: #F62C2C;
			}

			.label {
				margin-right: 18rpx;
			}

			.common {
				margin-bottom: 43rpx;
			}
		}
	}

	.nav {
		margin: 20rpx 0 0 0;
	}

	.cu-card.article>.cu-item .title {
		font-size: 30rpx;
		margin-bottom: 20rpx;
		-webkit-line-clamp: 1;
	}

	.cu-card.article>.cu-item .cu-content .text-content {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(100, 100, 100, 1);
		margin: 0 0 17rpx;
		line-height: 33rpx;
		-webkit-line-clamp: 3;
	}

	.cu-card.article>.cu-item .cu-content image {
		width: 300rpx;
		height: 141rpx;
	}

	.cu-card.article>.cu-item .cu-content .time {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(178, 178, 178, 1);

		span {
			margin-right: 30rpx;
		}
	}

	.topnav {
		position: fixed;
		animation: myfirst 0.2s;
		top: 0;
		z-index: 10;
		margin: 0;
		background-color: #FFFFFF;
	}

	@keyframes myfirst {
		from {
			top: -100upx;
		}

		to {
			top: 0;
		}
	}

	.cu-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		border-radius: 0;
	}

	.tip-box {
		margin: 30rpx;
		padding: 40rpx 28rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 1rpx 31rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 9rpx;

		image {
			width: 170rpx;
		}

		.text-nor {
			margin-bottom: 34rpx;
		}
	}
</style>
